<template>
  <div class="newPwd">
    <el-col class="newPasswordCoainter" :xs="18">
      <div class="title">New Password</div>
      <p>Please enter a new password for your account.</p>
      <el-form
        label-width="120px"
        label-position="top"
        :model="passwordInfo"
        :rules="passRules"
        ref="pwdForm"
      >
        <el-form-item label="New Password" prop="newPassword">
          <el-input v-model="passwordInfo.newPassword" show-password />
          <ul>
            <li>At least 8 characters long.</li>
            <li>
              A combination of uppercase letters, lowercase letters, numbers, and symbols.
            </li>
          </ul>
        </el-form-item>

        <el-form-item label="Confirm Password" prop="confirmPassword">
          <el-input show-password v-model="passwordInfo.confirmPassword" />
        </el-form-item>
      </el-form>

      <el-button color="#00AA8B">Submit</el-button>
    </el-col>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Passwordfuc, confirmPwdfuc } from '@/utils/rules.ts';
const pwdForm = ref();
const passwordInfo = reactive({
  newPassword: '',
  confirmPassword: '',
});
const passRules = reactive({
  newPassword: [
    {
      required: true,
      min: 6,
      max: 8,
      message: 'Password should be 6 to 8',
      trigger: 'blur',
    },
    { validator: Passwordfuc(passwordInfo.newPassword, pwdForm), trigger: 'blur' },
  ],
  confirmPassword: [
    {
      required: true,
      validator: confirmPwdfuc(passwordInfo.newPassword),
      trigger: 'blur',
    },
  ],
});
</script>
<style scoped lang="less">
.newPwd {
  overflow: hidden;
  .newPasswordCoainter {
    width: 464px;
    margin: 60.25px auto 0;

    color: #cdcdcd;
    .title {
      font-family: "Neue Machina";
      font-size: 28px;
    }
    p {
      margin: 16px 0 25px;
      font-size: 17px;
    }
    /deep/ .el-form {
      ul {
        color: white;
        margin-top: 4px;
        font-size: 11px;
        li {
          margin-left: 18px;
        }
        &:last-child {
          height: 50px;
          line-height: 50px;
          margin-top: 4px;
        }
      }
      .el-form-item__label {
        color: white;
      }
      .el-input {
        height: 44px;
        svg,
        .el-input__icon {
          width: 20px;
          height: 20px;
        }
      }
    }
    .el-button {
      width: 100%;
      height: 44px;
    }
  }
  @media screen and (max-width: 768px) {
    .newPasswordCoainter {
      margin-top: 36px;
    }
  }
}
</style>
